import React, { Component } from "react";
import { NavBar, Icon, SearchBar } from "antd-mobile";
import "./SearchCenter.scss";
import myaxios from "../../utils/myaxios";
import {withRouter} from "react-router-dom"
class SearchCenter extends Component {
  getProductList = (params) => {
    console.log("获取产品列表");
    //
    myaxios
      .get("goods/qsearch", {
        params: {
          query: this.state.inputVal,
        },
      })
      .then((res) => {
        console.log(res);
        this.setState({
          productList: res,
        });
      });
  };
  state = {
    inputVal: "",
    productList: [
    //   {
    //     goods_id: 57407,
    //     goods_name:
    //       "沿途(YANTU)车载充电器一拖三点烟器汽车用双USB多功能充电器车充 黑色带电压监测",
    //   },
    //   {
    //     goods_id: 57407,
    //     goods_name:
    //       "沿途(YANTU)车载充电器一拖三点烟器汽车用双USB多功能充电器车充 黑色带电压监测",
    //   },
    //   {
    //     goods_id: 57407,
    //     goods_name:
    //       "沿途(YANTU)车载充电器一拖三点烟器汽车用双USB多功能充电器车充 黑色带电压监测",
    //   },
    ],
  };
  handleItemClick=(e) => {
      let good_id = e.target.getAttribute("data-goods_id");
      this.props.history.push("/goodDetail/"+good_id);
  }
  
  render() {
    return (
      <div className="yg-sc">
        <NavBar
          className="yg-sc-nav"
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}
        >
          搜索中心
        </NavBar>
        {/* 搜索中心输入框开始 */}
        <SearchBar
          className="yg-sc-search"
          placeholder="Search"
          value={this.state.inputVal}
          // 是键盘 按下 enter 键触发
          //   onSubmit={(value) => console.log(value, "onSubmit")}
          // 清除输入内容时触发的
          //   onClear={(value) => console.log(value, "onClear")}
          // 聚焦的时候 触发
          // onFocus={() => console.log("onFocus")}
          // 失焦 触发
          //   onBlur={() => console.log("onBlur")}
          onCancel={() => this.getProductList()}
          showCancelButton
          cancelText="搜索"
          // 内容改变的时候触发
          onChange={(value) => {
            console.log(value);
            this.setState({
              inputVal: value,
            });
          }}
        />
        {/* 搜索中心输入框结束 */}
        {/* 产品列表开始 */}
        <div className="yg-sc-list" onClick={this.handleItemClick}>
          {this.state.productList.map((v) => {
            return (
              <div className="sc-list-item" key={v.goods_id} data-goods_id={v.goods_id}>
                {v.goods_name}
              </div>
            );
          })}
        </div>
        {/* 产品列表结束 */}
      </div>
    );
  }
}
export default withRouter(SearchCenter)
